<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <eHeader :permission="permission" />
      <crudOperation :permission="permission" :async="true">
        <el-button slot="end-left" class="filter-item" size="mini" type="danger" @click="goBack" >
          <i class="el-icon-arrow-left"></i>返回年度评价
        </el-button>
      </crudOperation>
    </div>
    <h2 v-if="this.crud.query.year != undefined" style="width:100%;text-align: center;">{{ this.crud.query.year }}年全市各板块六项指标</h2>
    <h2 v-else-if="this.crud.query.year == undefined" style="width:100%;text-align: center;">所有年份全市各板块六项指标</h2>
    <!--表格渲染-->
    <el-table ref="table" v-loading="crud.loading" border :data="crud.data" style="width: 100%;" @selection-change="crud.selectionChangeHandler"
      :header-cell-style="{textAlign: 'center'}" :cell-style="{ textAlign: 'center' }"
    >
      <!--<el-table-column type="selection" width="55" />-->
      <el-table-column prop="district" label="区镇" :resizable="false"/>
      <el-table-column prop="taxPerMu" :resizable="false" label="亩均税收（万元/亩）">
        <template slot="header">
          <div>亩均税收<br/>（万元/亩）</div>
        </template>
      </el-table-column>
      <el-table-column prop="salePerMu" :resizable="false" label="亩均销售（万元/亩)">
        <template slot="header">
          <div>亩均销售<br/>（万元/亩）</div>
        </template>
      </el-table-column>
      <el-table-column prop="rdSalesRatio" :resizable="false" label="全员劳动生产率（万元/人）">
        <template slot="header">
          <div>全员劳动生产率<br/>（万元/人）</div>
        </template>
      </el-table-column>
      <el-table-column prop="overallLaborProductivity" :resizable="false" label="研发经费占销售比重（%）" width="150px">
        <template slot="header">
          <div>研发经费占销售比重<br/>（%）</div>
        </template>
      </el-table-column>
      <el-table-column prop="unitEnergyAdd" :resizable="false" label="单位能耗增加值（万元/吨标准煤）">
        <template slot="header">
          <div>单位能耗增加值<br/>（万元/吨标准煤）</div>
        </template>
      </el-table-column>
      <el-table-column prop="unitMajorPollutantsAdd" :resizable="false" label="单位主要污染物增加值（万元/当量）" width="165px">
        <template slot="header">
          <div>单位主要污染物增加值<br/>（万元/当量）</div>
        </template>
      </el-table-column>
  
      <!--   编辑与删除   -->
      <el-table-column
        label="操作"
        width="250px"
        align="center"
        fixed="right"
        :resizable="false"
      >
        <template slot-scope="scope">
          <udOperation
            :data="scope.row"
            :permission="permission"
            async
          >
            <!-- <el-button slot="left" class="option-item" size="mini" type="primary" plain icon="el-icon-view"  title="查看"  @click="doView(scope.row.id)" />-->
          </udOperation>
        </template>
      </el-table-column>
    </el-table>
    <!--分页组件-->
    <pagination />
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import crudIndex from '@/api/business/comment/index'
import eHeader from './module/header'
import CRUD, { presenter } from '@crud/crud'
import crudOperation from '@crud/CRUD.operation'
import pagination from '@crud/Pagination'
import udOperation from '@crud/UD.operation'
const addPageUrl = '/business/index/add';
const editPageUrl = '/business/index/edit';
export default {
  name: 'IndexList',

  components: { eHeader, crudOperation, pagination, udOperation },
  cruds() {
    return CRUD({
      title: '资源集约利用评价',
      url: 'business/intensive_utilization/six_indicators/queryPage',
      crudMethod: { ...crudIndex},
      addPage: true,
      addPageUrl: addPageUrl,
      editPage: true,
      editPageUrl: editPageUrl,
      editParams: ['id'],
      optShow: {
        add: true,
        edit: false,
        del: false,
        reset:true
      },
      query: {
        status:0
      }
    })
  },

  mixins: [presenter()],
  // 数据字典

  data() {
    return {
      permission: {
        add: [],
        edit: [],
        del: [],
        info: []
      },
      id: null,
      dialogFormVisible: false,
      form: {
        id: null,
      },
      
    }
  },

  created() {
    console.log(this.permission, 'permission')
  },

  methods: {
    addPlan() {
      this.$router.push('/business/index/add')
    },
    onChangeStatus (record) {
      console.log('record : ', record)
    },
    goBack(){
      this.$router.push('/business/comment/')
    }
  },
  computed: {
    ...mapGetters([
      'user'
    ])
  },
  mounted(){
    this.crud.query.year = this.$route.query && this.$route.query.year;
    this.crud.toQuery()
    localStorage.setItem('year', this.$route.query && this.$route.query.year);
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
 ::v-deep .el-input-number .el-input__inner {
    text-align: left;
  }
 ::v-deep .svg-icon {
   vertical-align: middle;
 }
 /* Tooltip 文本 */
 .tooltip .tooltiptext {
   visibility: hidden;
   width: 40px;
   background-color: #666;
   color: #fff;
   text-align: center;
   padding: 5px 0;
   border-radius: 6px;

   /* 定位 */
   position: absolute;
   z-index: 1;
   right: 28px;
   top: 0;
 }

 /* 鼠标移动上去后显示提示框 */
 .tooltip:hover .tooltiptext {
   visibility: visible;
 }
</style>

<style>
 .el-table th.el-table__cell > .cell{
  text-align: center;
  color: black
 }
</style>